<template>
  <div>
    <x-header title="个人资料" style="background-color: #33bb99;">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
    </x-header>
    <group>
      <cell title="头像" >
        <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" style="height:50px;" @click="show(index)"/>
      </cell>
    </group>
    <group>
      <cell title="昵称" >{{this.config1.globalInfo.user.nick}}</cell>
      <cell title="姓名" >{{this.config1.globalInfo.user.name}}</cell>
      <cell title="电话" >{{this.config1.globalInfo.user.mobile}}</cell>
    </group>
    <group>
      <cell title="性别" >{{this.config1.globalInfo.user.sex==0?'女':'男'}}</cell>
      <cell title="地区" >{{this.config1.globalInfo.user.purchasersInfo.detailed_address}}</cell>
    </group>
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, XHeader, Previewer, TransferDom } from 'vux'
  export default {
    name: "Info",
    directives: {
      TransferDom
    },
    components: {
      Group,Cell,XHeader,Previewer,
    },
    data () {
      return {
        info:{},
        list: [{
          src: this.config1.globalInfo.user.head_url?this.config1.globalInfo.user.head_url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3705310863,2037219726&fm=26&gp=0.jpg',
        }],
        options: {
          getThumbBoundsFn (index) {
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        },
        show5: false,
      }
    },
    created(){
      this.info = this.config1.globalInfo.user;
    },
    methods:{
      back(){
        this.$router.push('/project1/view3/main');
      },
      logIndexChange (arg) {
        console.log(arg)
      },
      show (index) {
        this.$refs.previewer.show(index)
      }
    }
  }
</script>

<style scoped>
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
.weui-tabbar{
  display: none!important;
}
</style>
